05. Array Index

Indexing

Remember that elements in an array are indexed starting at the position 0. To access an element in an array, use the name of the array immediately followed by square brackets containing the index of the value you want to access.

var donuts = ["glazed", "powdered", "sprinkled"];
console.log(donuts[0]); // "glazed" is the first element in the `donuts` array

Prints: "glazed"

One thing to be aware of is if you try to access an element at an index that does not exist, a value of undefined will be returned back.

console.log(donuts[3]); // the fourth element in `donuts` array does not exist!

Prints: undefined

Avoid accessing elements outside the bounds of an array. If you try to, the missing element will be returned back as `undefined` !

Avoid accessing elements outside the bounds of an array. If you try to, the missing element will be returned back as undefined !

Using Array Indices

Take a look at the following donuts array.

var donuts = ["glazed", "chocolate frosted", "Boston cream", "powdered", "sprinkled", "maple", "coconut", "jelly"];

What line of code would you use to select the "coconut" donut from the donuts array?
SOLUTION: donuts[6]

Finally, if you want to change the value of an element in array, you can do so by setting it equal to a new value.

donuts[1] = "glazed cruller"; // changes the second element in the `donuts` array to "glazed cruller"
console.log(donuts[1]);

Prints: "glazed cruller"

Changing Value at an Index

INSTRUCTOR NOTE:

Change the value of an element by setting it equal to a new value.

What does the array look like?

We’ve decided to replace some of donuts in the donuts array.

var donuts = ["glazed", "chocolate frosted", "boston cream", "powdered", "sprinkled", "maple", "coconut", "jelly"];


donuts[2] = "cinnamon twist";
donuts[4] = "salted caramel";
donuts[5] = "shortcake eclair";

What does the donuts array look like after the following changes?
SOLUTION: ["glazed", "chocolate frosted", "cinnamon twist", "powdered", "salted caramel", "shortcake eclair", "coconut", "jelly"]

Next Concept